<template>
    <div class="tembox">
    <div class="myinfo">
        <img class="headpic" src="../../assets/image/01.png" @click="alertVanSheet">
        <van-action-sheet
        v-model="showVanSheet"
        :actions="actions"
        cancel-text="取消"
         @select="onSelectVanSheet"
        @cancel="onCancelVanSheet"
        />
        <div class="infobox">
            <div class="info_li">
                <span class="name">手机号</span>
                <div class="content">
                    <input type="text" v-model="mobile" disabled>
                </div>
            </div>
            <div class="info_li">
                <span class="name">姓名</span>
                <div class="content">
                    <input type="text"  v-model="name" v-bind:disabled="!iseditinfo">
                </div>
            </div>
            <div class="info_li">
                <span class="name">性别</span>
                <div class="content " >
                      <select v-model="sex" class="tobottomicobg"
                      v-bind:disabled="!iseditinfo"
                      :style="iseditinfo?'backgroundImage:url('+require('../../assets/image/05.png')+')':''">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </div>
            </div>
            <div class="info_li">
                <span class="name">生日</span>
                <div class="content">
                      <span class="birthspan tobottomicobg"  @click="iseditinfo?alertDatePicker():''"
                       :style="iseditinfo?'backgroundImage:url('+require('../../assets/image/05.png')+')':''">{{birthday}}</span>
                       <van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }">
                        <van-datetime-picker
                            v-model="selectDate_birth"
                            type="date"
                            :min-date="minDate_birth"
                            :max-date="maxDate_birth"
                            @confirm="changeBirth"
                            @cancel="cancelChangeBirth"
                            />
                        </van-popup>
                </div>
            </div>
            <div class="info_li">
                <span class="name">邮箱</span>
                <div class="content">
                    <input type="text" v-bind:disabled="!iseditinfo" v-model="email">
                </div>
            </div>
        </div>
        <div class="btnbox">
            <div class="edit" v-show="!iseditinfo" @click="editInfo">编辑</div>
            <div class="submit" v-show="iseditinfo" @click="submitInfo">提交</div>
            <div class="cancel" v-show="iseditinfo" @click="cancelInfo">取消</div>
        </div>
    </div>
    <div class="moreart" v-show="!iseditinfo">
        <span class="title">更多A.R.T</span>
        <div>
            <a href="http://www.zeststore.com">
                <img src="../../assets/image/03.png" >
                <span>A.R.T在线商城</span>
                <img class="torightico" src="../../assets/image/07.png" >
            </a>
        </div>
        <div>
            <a href="http://www.zeststore.com">
                <img src="../../assets/image/04.png" >
                <span>A.R.T活动</span>
                <img class="torightico" src="../../assets/image/07.png" >
            </a>
        </div>
    </div>
    </div>
</template>

<script>
import HTTP from "../../utils/http";
import { ActionSheet, DatetimePicker, Popup, Toast } from "vant";
import "vant/lib/action-sheet/style";
import "vant/lib/toast/style";
import "vant/lib/datetime-picker/style";
import "vant/lib/popup/style";
import Vue from "vue";
Vue.use(ActionSheet);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Toast);
export default {
  name: "",
  data() {
    return {
      userInfo: {
        id: "",
        mobile: "",
        name: "",
        head_image: "",
        sex: "",
        birthday: "",
        email: "",
        create_time: ""
      }, //真实数据

      id: "",
      mobile: "",
      name: "",
      head_image: "",
      sex: "",
      birthday: "",
      email: "",
      create_time: "",
      //页面展示的数据

      iseditinfo: false, //是否正在编辑
      //点击头像后的弹层
      showVanSheet: false,
      actions: [{ name: "退出" }],
      //生日选择器
      showDatePicker: false,
      minDate_birth: new Date(1900, 0, 1),
      maxDate_birth: new Date(),
      selectDate_birth: new Date()
    };
  },
  methods: {
    getUserInfo() {
      //获取个人资料
      let that = this;
      HTTP.Get("/artfurniture/user/info")
        .then(res => {
          console.log("res");
          console.log(res);
          if (res.code == 1) {
            that.userInfo = res.data;
            that.renderData();
          } else {
            Toast(res.errMsg);
          }
        })
        .catch(err => {
          // this.$message.error(res.err_msg);
          console.log("err");
          console.log(err);
        });
    },
    renderData() {
      //把接口返回的数据，渲染至页面
      this.id = this.userInfo.id;
      this.mobile = this.userInfo.mobile;
      this.name = this.userInfo.name;
      this.head_image = this.userInfo.head_image;
      this.sex = this.userInfo.sex;
      this.birthday = this.userInfo.birthday;
      this.email = this.userInfo.email;
      this.create_time = this.userInfo.create_time;
    },
    editInfo() {
      // 点击编辑按钮
      console.log(this);
      this.iseditinfo = !this.iseditinfo;
    },
    submitInfo() {
      let that = this;
      // 提交

      HTTP.Post("/artmall/user/update", {
        userName: that.mobile,
        name: that.name,
        sex: that.sex,
        email: that.email,
        birthday: that.birthday
      })
        .then(res => {
          console.log("编辑资料--------------");
          console.log(res);
          if (res.code == 1) {
            that.iseditinfo = !that.iseditinfo;
            that.userInfo.mobile = that.mobile;
            that.userInfo.name = that.name;
            that.userInfo.sex = that.sex;
            that.userInfo.birthday = that.birthday;
            that.userInfo.email = that.email;
            console.log(that);
          } else {
            Toast(res.errorMsg);
          }
        })
        .catch(err => {
          // this.$message.error(res.err_msg);
          console.log("err");
          console.log(err);
        });
    },
    cancelInfo() {
      // 取消编辑
      this.iseditinfo = !this.iseditinfo;
      console.log(this);
      this.renderData();
    },
    getnowDate(item) {
      // 转换日期格式
      let date = item;
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let nowDate = year + "-" + month + "-" + day;
      return nowDate;
    },

    onSelectVanSheet(item) {
      // 退出
      this.showVanSheet = false;
      console.log(item);
      let that = this;
      HTTP.Get("/artmall/user/logout")
        .then(res => {
          console.log("tuichu ------");
          console.log(res);
          if (res.code == 1) {
            that.$router.push("/login");
          } else {
            Toast(res.errMsg);
          }
        })
        .catch(err => {
          // this.$message.error(res.err_msg);
          console.log("err");
          console.log(err);
        });
    },
    onCancelVanSheet(item) {
      // 取消点击头像
      this.showVanSheet = false;
      console.log(item);
    },
    alertVanSheet() {
      // 点击头像
      this.showVanSheet = true;
    },
    changeBirth(item) {
      console.log(item);
      this.showDatePicker = false;
      this.birthday = this.getnowDate(item);
    },
    cancelChangeBirth() {
      this.showDatePicker = false;
    },
    alertDatePicker() {
      this.showDatePicker = true;
    }
  },
  created() {
    //恢复原数据
    this.getUserInfo();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.tembox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
input,
select,
option,
.birthspan {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  font-size: 20px;
  color: rgb(98, 98, 98);
}
input:disabled {
  background-color: #fff;
}
.birthspan {
  display: inline-block;
}
.myinfo {
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: rgb(98, 98, 98);
  background-color: #fff;
  overflow: hidden;
  .headpic {
    display: block;
    width: 134px;
    margin: 72px auto 54px;
  }
  .infobox {
    padding: 0 30px;
    .info_li {
      width: 100%;
      border-bottom: 1px solid #707070;
      height: 52px;
      line-height: 52px;
      padding-top: 26px;
      overflow: hidden;
      span.name {
        display: block;
        width: 100px;
        float: left;
      }
      div.content {
        width: 590px;
        float: left;
        position: relative;
        input,
        select,
        .birthspan {
          width: 100%;
          height: 48px;
        }
        .tobottomicobg {
          // background-image: url('../../assets/image/05.png');
          width: 95%;
          background-size: 24px auto;
          background-position: center right;
          background-repeat: no-repeat;
          background-color: #fff;
        }
      }
    }
  }
  .btnbox {
    margin-bottom: 20px;
    & > div {
      width: 688px;
      height: 46px;
      font-size: 24px;
      text-align: center;
      line-height: 46px;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 38px;
    }
    .edit,
    .cancel {
      color: rgb(166, 8, 49);
      border: 1px solid #a6052c;
    }
    .submit {
      background-color: #a6052c;
      height: 48px;
      line-height: 48px;
      color: #fff;
    }
  }
}
.moreart {
  margin-top: 38px;
  background-color: #fff;
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #626262;
  padding: 0 30px;
  .title {
    padding-top: 28px;
    display: block;
  }
  & > div {
    overflow: hidden;
    & > a {
      display: block;

      margin-top: 22px;
      margin-bottom: 26px;
      height: 46px;
      line-height: 46px;
      padding-bottom: 18px;
      border-bottom: 1px solid #707070;
      img {
        height: 46px;
        margin-right: 16px;
        float: left;
      }
      span {
        line-height: 46px;
        float: left;
        color: #626262;
      }
      .torightico {
        float: right;
        height: 22px;
        margin-top: 12px;
      }
    }
  }
}
</style>
